<template>
  <div class="page-teacher-info-detail">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        设置个人资料
      </div>

      <div style="min-height:200px;" id="loading-user-info">
        <el-form :model="myInfoForm"
                 v-if="userInfo.roles"
                 :rules="myInfoFormRules" ref="myInfoForm"
                 label-width="100px"
                 class="demo-myInfoForm">
          <el-form-item label="用户名" prop="real_name">
            <el-input v-model="myInfoForm.username" class="w220" disabled></el-input>
          </el-form-item>

          <el-form-item label="我的角色" prop="role">
            <el-tag type="info" size="small" v-for="item in userInfo.roles.roles" :key="item.id">{{item.name}}</el-tag>
            <!--<el-select v-model="myInfoForm.role" class="w220" placeholder="请选择角色" disabled filterable>-->
            <!--<el-option v-for="item in departmentOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
            <!--</el-select>-->
          </el-form-item>

          <el-form-item label="学科" prop="subject_id">
            <el-select v-model="myInfoForm.department_id" class="w220" placeholder="请选择学科" disabled filterable>
              <el-option v-for="item in subject" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="部门" prop="department">
            <el-select v-model="myInfoForm.department_id" class="w400" placeholder="请选择部门" disabled filterable>
              <el-option v-for="item in departmentOptions" :key="item.id" :label="item.name"
                         :value="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="真实姓名" prop="real_name">
            <el-input v-model.trim="myInfoForm.real_name" class="w220"></el-input>
          </el-form-item>

          <el-form-item label="手机" prop="mobile">
            <el-input class="w220" v-model.trim="myInfoForm.mobile"></el-input>
          </el-form-item>

          <!--<el-form-item label="性别" prop="real_name">-->
          <!--<el-radio v-model="myInfoForm.male" label="1">男</el-radio>-->
          <!--<el-radio v-model="myInfoForm.male" label="2">女</el-radio>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="上传头像" prop="subject_id">-->
          <!--<el-upload-->
          <!--class="avatar-uploader"-->
          <!--action="https://jsonplaceholder.typicode.com/posts/"-->
          <!--:show-file-list="false"-->
          <!--:on-success="handleAvatarSuccess"-->
          <!--:before-upload="beforeAvatarUpload">-->
          <!--<img v-if="imageUrl" :src="imageUrl" class="avatar bd-3">-->
          <!--<i v-if="!imageUrl" class="el-icon-plus avatar-uploader-icon bd-2"></i>-->
          <!--</el-upload>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="备注" prop="remarks">-->
          <!--<el-input class="w400" type="textarea" size="small" v-model="myInfoForm.remarks"></el-input>-->
          <!--</el-form-item>-->


          <el-form-item>
            <el-button type="primary" @click="submitForm('myInfoForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-card>

  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { validateMobile } from '../utils/validate'

  export default {
    data () {
      return {
        imageUrl: '',
        userInfo: {},
        editMode: true,
        moreInfo: [],
        myInfoForm: {
          real_name: '',
          department_id: ''
          // male: '1'
        },
        myInfoFormRules: {
          real_name: [
            {message: '请输入真实姓名', trigger: 'blur'}
          ],
          mobile: [
            {validator: validateMobile, trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapGetters('common', ['departmentOptions', 'subject', 'areaAll'])
    },
    methods: {
      handleAvatarSuccess (res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      }
    }
  }
</script>

<style lang="less" scoped>
  .avatar-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover {
        border-color: #409EFF;
      }
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
